<template>
    <el-skeleton v-if="ready" :rows="1" animated>
        <template #template>
            <div class="flex-align-center">
                <el-skeleton-item variant="circle" style="width: 48px; height: 48px" />
                <div style="width: 30%; margin-left: 15px;">
                    <el-skeleton-item variant="text" style="width: 50px;" />
                    <el-skeleton-item variant="text"/>
                </div>
                <el-skeleton-item variant="button" class="skeleton-button" />
            </div>
        </template>
    </el-skeleton>

    <el-popover
        ref="popoverRef"
        :virtual-ref="virtualRef"
        trigger="click"
        title="With title"
        virtual-triggering>
        <span> Some content </span>
    </el-popover>

    <div>
        <ul class="relation-list">
            <li v-for="item in list" :key="item.id">
                <Avatar :size="48" :src="item.avatarUrl"></Avatar>
                <div class="relation-content">
                    <a @mouseenter="targetFocus">{{ item.nickname }}</a>
                    <span>{{ item.brief || 'xxxxxxxxxxxxxxxxx'}}</span>
                </div>
                <div style="margin-left: auto;">
                    <el-button
                        style="width: 6em;"
                        v-if="type === 'following'"
                        @mouseenter="followChange(0)"
                        @mouseleave="followChange(1)"
                        @click="followingClick">
                        {{ followState === 1 ? '已关注' : '取消关注' }}
                    </el-button>
                    <el-button v-else>关注</el-button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { ref, unref, PropType, toRefs } from 'vue'
import { FollowList } from '@/types/user'
import Avatar from '@/components/common/Avatar.vue'
import { ClickOutside as vClickOutside } from 'element-plus'

const props = defineProps({
    ready: {
        type: Boolean,
        default: true
    },
    type: {
        type: String,
        default: 'following'
    },
    list: {
        type: Array as PropType<FollowList[]>
    }
})

const { ready, type, list } = toRefs(props)

// 鼠标悬浮头像或者昵称的气泡
const popoverRef = ref()
const virtualRef = ref()

const targetFocus = () => {
    unref(popoverRef).popperRef?.delayHide?.()
}

// 改变关注状态
const followState = ref<number>(1)
const followChange = (type: number) => {
    followState.value = type
}

// 关注状态点击
const followingClick = () => {
    console.log('取消关注')
}

</script>

<style lang="less" scoped>
.skeleton-button {
    margin-left: auto;
}
.relation-list {
    > li {
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-gray-s);
        padding: 15px 0;
        line-height: 1;
        .relation-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 0 50px 0 20px;
            > a {
                cursor: pointer;
                font-size: var(--font-size-large);
            }
            > span {
                color: var(--color-text-l);
                margin-top: 5px;
                font-size: var(--font-size-medium);
                line-height: 1.5;
            }
        }
    }
}
</style>